<template>
	<view class="order-detail" v-if="!loading">
		<image class='top-img' mode='widthFix'
			:src='details.carConfig ? details.carConfig.configurePic : "@appstatic/car/car_banner.jpg"' />
		<view class='content'>
			<view :class="details.orderFlag == 1 ? 'c-title before': 'c-title'">
				{{details.orderCancelFlag && (details.orderCancelFlag != 3) ? getCancelStatusText(details.orderCancelFlag): ((details.orderFlag == 1) && (details.currentPayType == 1) ? '定金待支付': ((details.orderFlag == 2) && (details.currentPayType == 3) ? '尾款已支付': getStatusText(details.orderFlag)))}}
			</view>

			<u-count-down v-if="details.orderFlag == 1" :time="diff" format="DD:HH:mm:ss" autoStart millisecond
				@change="onChange">
				<view class="c-title warn" style="margin-top: 10rpx;">
					<text class="time__item"
						v-if="timeData.days*24+timeData.hours>9">剩余{{ timeData.days*24+timeData.hours}}&nbsp;时</text>
					<text class="time__item" v-else>剩余0{{ timeData.days*24+timeData.hours}}&nbsp;时</text>
					<text class="time__item" v-if="timeData.minutes>9">{{ timeData.minutes }}&nbsp;分</text>
					<text class="time__item" v-else>0{{ timeData.minutes }}&nbsp;分</text>
					<text class="time__item" v-if="timeData.seconds>9">{{ timeData.seconds }}&nbsp;秒将自动取消</text>
					<text class="time__item" v-else>0{{ timeData.seconds }}&nbsp;秒将自动取消</text>
				</view>
			</u-count-down>
			<view class='c-name'>{{details.carConfig.modelName}}</view>
			<view class='c-sub'>
				<view class='sub-list'>{{details.carConfig.modelConfigureName}} | </view>
				<view class='sub-list'>{{details.carConfig.colorName}}</view>
			</view>
			<view class='pay-msg'>
				<view class='p-header'>
					<view class='left'>购买信息</view>
					<!-- <view class='right'>个人购车</view> -->
				</view>
				<view class='p-list'>
					<view class='left'>购车人姓名</view>
					<view class='right'>{{details.buyName}}</view>
				</view>
				<view class='p-list'>
					<view class='left'>联系方式</view>
					<view class='right'>{{details.buyPhone}}</view>
				</view>
				<view class='p-list'>
					<view class='left'>身份证号</view>
					<view class='right'>{{details.buyCard}}</view>
				</view>
				<view class='p-list'>
					<view class='left'>城市</view>
					<view class='right'>{{details.provinceName || ''}} {{details.cityName}}</view>
				</view>
				<view class='p-list'>
					<view class='left'>门店</view>
					<view class='right'>{{details.storeName || ''}}</view>
				</view>
				<view class='p-list'>
					<view class='left'>收货地址</view>
					<view class='right address'>{{details.buyAddress}}</view>
				</view>
			</view>
			<view class='price-detail'>
				<view class='p-header'>价格明细</view>
				<view class='p-list have-item'>
					<view class='left'>车系</view>
					<view class='right'>
						<view class="span">
							<view style="font-weight: 600;">{{details.carConfig.seriesName}}</view>
						</view>
					</view>
				</view>
				<view class='p-list have-item'>
					<view class='left'>车型</view>
					<view class='right'>
						<view class="span">
							<view style="font-weight: 600;">{{details.carConfig.modelName}}</view>
						</view>
					</view>
				</view>
				<view class='p-list have-item'>
					<view class='left'>配置</view>
					<view class='right'>
						<view class="span" style="padding-right: 5px;">{{details.carConfig.modelConfigureName}} </view>
						+ ￥{{details.carConfig.modelConfigureMoney}}
					</view>
				</view>
				<view class='p-list have-item'>
					<view class='left'>颜色</view>
					<view class='right'>
						<view class="span" style="padding-right: 5px;">{{details.carConfig.colorName}}</view> +
						￥{{details.carConfig.colorMoney}}
					</view>
				</view>

				<!-- <view class='p-list have-item'>
					<view class='left'>{{details.carConfig.modelConfigureName}}</view>
					<view class='right'>+ ￥{{details.carConfig.modelConfigureMoney}}</view>
				</view>
				<view class='p-list have-item'>
					<view class='left'>{{details.carConfig.colorName}}</view>
					<view class='right'>+ ￥{{details.carConfig.colorMoney}}</view>
				</view> -->
				<view class='p-list have-item'>
					<view class='left'>选装包</view>
					<view v-if="!details.carConfig.servicepkgInfos.length" class='right'>
						<view style="font-weight: 400;display: inline-block;padding-right: 5px;">无</view> + ￥0
					</view>
					<view v-else class='right'>
						<view style='font-weight: 400;display: inline-block;padding-right: 5px;'>
							{{details.carConfig.servicepkgInfos[0].serverName}}
						</view>
						+ ￥{{details.carConfig.servicepkgInfos[0].serverMoney}}
					</view>
				</view>
				<view v-if='details.carConfig.servicepkgInfos.length' class="items-sub">
					{{details.carConfig.servicepkgInfos[0].packageDescribe}}
				</view>
				<!-- <view class='p-list have-item items' v-for="item in details.carConfig.servicepkgInfos" :key="item.id">
					<view class='right'>{{item.serverName}}</view> 
					<view class='right'>￥{{item.serverMoney}}</view>
				</view> -->
				<view class='p-list have-item'>
					<view class='left'>个性化</view>
					<view v-if="!details.carConfig.uniqueserverInfos.length" class='right'>
						<view style="font-weight: 400;display: inline-block; padding-right: 5px;">无</view> + ￥0
					</view>
					<view v-else class='right'>
						<view style='font-weight: 400;display: inline-block;padding-right: 5px;'>
							{{details.carConfig.uniqueserverInfos[0].serverName}}
						</view>
						+ ￥{{details.carConfig.uniqueserverInfos[0].serverMoney}}
					</view>
				</view>
				<view v-if='details.carConfig.uniqueserverInfos.length' class="items-sub">
					{{details.carConfig.uniqueserverInfos[0].uniqueContent}}
				</view>
				<!-- 六期加优惠券 -->
				<view class='p-list have-item' v-if="details.couponNo!=undefined&&details.couponNo!=null&&details.couponNo!=''">
					<view class='left'>优惠金额</view>
					<view class='right'>
						<view class="span" style="padding-right: 5px;"></view> -
						￥{{details.preferentialAmount||0}}
					</view>
				</view>
				<!-- <view class='p-list have-item items' v-for="item in details.carConfig.uniqueserverInfos" :key="item.id">
					{{item.uniqueContent}}
				</view> -->
				<view class='p-list total'>
					<view class='left'>总价</view>
					<view class='right' style="color: #EA5404;">
						
						
						<!-- ￥{{details.carConfig.orderAmount}} -->
					
					
					
					￥{{(Number(details.carConfig.orderAmount||0) * 100 - Number(details.preferentialAmount||0)* 100) / 100}}
					
					
					</view>
					
					
					
					
				</view>
			</view>


			<!-- --------------新加发票信息------------------------ -->

			<view class='order-msg'
				v-if="details.currentPayType == 3&&details.invoiceType!=undefined&&details.invoiceType!=null&&details.invoiceType!=''">
				<view class='o-header'>发票信息</view>
				<!-- --------------新增 发票类型------------------------ -->
				<view class='o-list'
					v-if="details.invoiceType!=undefined&&details.invoiceType!=null&&details.invoiceType!=''">
					<view class='left'>发票类型</view>
					<view class='right' v-if="details.invoiceType=='1'">机动车销售统一发票</view>
					<view class='right' v-else-if="details.invoiceType=='2'">增值税专用发票</view>
				</view>
				<!-- --------------新增 发票类型------------------------ -->

				<view class='o-list' v-if="details.isPersonal==1">
					<view class='left'>姓名</view>
					<view class='right'>{{details.buyNameFP}}</view>
				</view>
				<view class='o-list' v-if="details.isPersonal==1">
					<view class='left'>身份证号</view>
					<view class='right'>{{details.buyCardFP}}</view>
				</view>
				<block v-if="details.isPersonal==2">

					<block v-if="details.invoiceType=='1'">
						<view class='o-list'>
							<view class='left'>企业名称</view>
							<view class='right'>{{details.buyBusiness}}</view>
						</view>
						<view class='o-list'>
							<view class='left'>社会统一识别码</view>
							<view class='right'>{{details.buyCode}}</view>
						</view>
					</block>

					<block v-else-if="details.invoiceType=='2'">
						<view class='o-list'>
							<view class='left'>公司名称</view>
							<view class='right'>{{details.corporateName}}</view>
						</view>
						<view class='o-list'>
							<view class='left'>单位税号</view>
							<view class='right'>{{details.unitTaxNo}}</view>
						</view>
						<view class='o-list'>
							<view class='left'>注册地址</view>
							<view class='right'>{{details.registeredAddress}}</view>
						</view>
						<view class='o-list'>
							<view class='left'>注册电话</view>
							<view class='right'>{{details.registrationPhone}}</view>
						</view>
						<view class='o-list'>
							<view class='left'>开户银行</view>
							<view class='right'>{{details.depositBank}}</view>
						</view>
						<view class='o-list'>
							<view class='left'>银行账号</view>
							<view class='right'>{{details.bankAccount}}</view>
						</view>
					</block>

				</block>


			</view>
			<!-- --------------新加发票信息------------------------ -->
			<!-- =======================新增 金融信息 ===========================-->
			<view class='pay-financial-form'>
				<view class='p-header'>
					<view class='left'>金融信息</view>
				</view>
				<view class='p-list'>
					<view class='left'>购车方式</view>
					<view class='right' v-if="details.paymentType=='1'">金融分期</view>
					<view class='right' v-else>全款支付</view>
				</view>
			</view>
			<!-- ========================新增 金融信息 ======================-->

			<view class='order-msg'>
				<view class='o-header'>订单信息</view>
				<view class='o-list'>
					<view class='left'>订单 ID</view>
					<view class='right'>
						{{details.orderId}}
						<view class='line'></view>
						<view class='copy'>
							<image @click='copy(details.orderId)' mode='widthFix'
								src='https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/copy-icon.png' />
						</view>
					</view>
				</view>
				<view class='o-list'>
					<view class='left'>下单时间</view>
					<view class='right'>{{details.createTime}}</view>
				</view>
				<view class='o-list color' v-if='(details.currentPayType == 2) || (details.currentPayType == 3)'>
					<view class='left'>定金金额</view>
					<view class='right'>￥{{details.depositAmount}}</view>
				</view>
				<view class='o-list' v-if='(details.currentPayType == 2) || (details.currentPayType == 3)'>
					<view class='left'>交易流水号</view>
					<view class='right'>{{details.depositTransactionId}}</view>
				</view>
				<view class='o-list' v-if='(details.currentPayType == 2) || (details.currentPayType == 3)'>
					<view class='left'>支付时间</view>
					<view class='right'>{{details.depositPaymentTime}}</view>
				</view>

				<view class='o-list color' v-if='details.currentPayType == 3'>
					<view class='left'>尾款金额</view>
					<view class='right'>￥{{details.finalPayment}}</view>
				</view>
				<view class='o-list' v-if='details.currentPayType == 3'>
					<view class='left'>交易流水号</view>
					<view class='right'>{{details.transactionId}}</view>
				</view>
				<view class='o-list' v-if='details.currentPayType == 3'>
					<view class='left'>支付时间</view>
					<view class='right'>{{details.paymentTime}}</view>
				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class='o-footer'>
			<view v-if='(details.orderFlag == 1) && (details.currentPayType == 1)' class='f-btn color' @click='toPay'>
				支付定金</view>
			<view v-if='(details.orderFlag == 1) && !details.orderCancelFlag' class='f-btn disabled'
				@click='cancelOrder'>取消订单</view>
			<view v-else class='f-btn disabled'>请到派方机车APP进行操作</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS||H5 -->
		<view class='o-footer'>
			<view v-if='(details.orderFlag == 1) && (details.currentPayType == 1)' class='f-btn color' @click='toPay'>
				支付定金</view>
			<view
				v-if='(details.orderFlag > 1) && (details.orderFlag < 7) && (details.currentPayType == 2) && (details.orderCancelFlag ?  details.orderCancelFlag == 3 : true)'
				class='f-btn' :class="details.paymentType=='1'?'colorGrey':'color'" @click='confirmOrder'>支付尾款</view>
			<view v-if='(details.orderFlag < 4) && !details.orderCancelFlag' class='f-btn disabled'
				@click='cancelOrder'>取消订单</view>
			<view class='f-btn color'
				v-if='((details.orderFlag == 10) || (details.orderFlag == 12)) && ( details.orderCancelFlag ?  details.orderCancelFlag == 3 : true )'
				@click='toOrderDetailEvaluate'>{{details.evaluateStatus ? '评价详情': '订单评价'}}</view>
			<view class='f-btn' v-if='details.orderCancelFlag' @click='refundProgress'>
				{{details.orderCancelFlag == 1 ? '退款详情': '退款申请记录'}}
			</view>
		</view>
		<!-- #endif -->
		<!-- <clxDialog :isShow='show' @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel' :content="dialogContent" :title="title" :confirmText="confirmText"></clxDialog> -->
		<u-modal :show="warnShow" content='若订单状态变更为订单已审批，则您的车辆已进入排产阶段，将无法取消订单及退款' confirmText='我已知晓'
			confirmColor='#EA5404' @confirm='confirmToPay'></u-modal>
	</view>
</template>

<script>
	import clxDialog from '@/components/clx-dialog/clx-dialog'
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	import dayjs from 'dayjs'
	export default {
		components: {
			clxDialog
		},
		data() {
			return {
				timeData: {},
				status: 5,
				id: null,
				loading: true,
				details: {},
				show: false,
				dialogContent: '您确认要取消订单吗?',
				dialogContent2: '若订单状态为订单已审批，则您的车辆已进入排产阶段，将无法取消订单及退款',
				title: '取消订单',
				confirmText: '确认',
				statusList: [{
						text: '定金待支付',
						value: 1
					},
					{
						text: '订单审批中',
						value: 2
					}, // 定金已支付
					{
						text: '订单已审批',
						value: 3
					},
					{
						text: '计划生产',
						value: 4
					},
					{
						text: '生产中',
						value: 5
					},
					{
						text: '已入库',
						value: 6
					},
					{
						text: '已入库',
						value: 7
					},
					{
						text: '已发货',
						value: 8
					},
					{
						text: '已到店',
						value: 9
					},
					{
						text: '待评价',
						value: 10
					},
					{
						text: '待评价',
						value: 11
					},
					{
						text: '已完成',
						value: 12
					},
					{
						text: '订单已取消',
						value: 13
					},
					{
						text: '订单关闭',
						value: 14
					},
					// {text: '退款成功', value: 15},
					// {text: '不予退款', value: 16},
				],
				cancelStatusList: [{
						text: '退款申请中',
						value: 1
					},
					{
						text: '退款申请中',
						value: 2
					},
					{
						text: '驳回',
						value: 3
					},
					{
						text: '退款成功',
						value: 4
					},
					{
						text: '退款申请中',
						value: 5
					},
				],
				nowTime: '',
				expireTime: '',
				diff: 0,
				warnShow: false
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options.id) this.id = String(options.id)
			// this.getDetail()
			//更新已读
			if (options && options.id && (options.from == "message" || options.from == "notice") && options.myId) {

				this.update2Read(options.id, options.myId, options.from);
			}
		},
		onShow: function() {
			this.getDetail()

		},
		methods: {
			getBeiJingTime: function() {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_SYS_API_GETBEIJINGTIME; ///levc-sys/sendMessage/updateLevcMessageUserReady
				var params = {};
				network.get(uri, params, 'json').then(res => {
					if (res.code == 200) {
						console.log("已读", JSON.stringify(res));
						that.nowTime = res.data
						that.diff = dayjs(that.expireTime).diff(dayjs(that.nowTime))
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},

			onChange(e) {
				this.timeData = e
			},
			//更新已读
			update2Read: function(id, myId, from) {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_SYS_SENDMSG_UPDATE_LEVCMSGUSERREADY; ///levc-sys/sendMessage/updateLevcMessageUserReady
				var params = {
					// "id": id,
					"id": myId,
					"isType": 1
				};
				network.post(uri, params, 'json').then(res => {
					if (res.code == 200) {
						console.log("已读", JSON.stringify(res));
						if (from == 'message') {
							//回调上一个页面
							let pages = getCurrentPages();
							if (pages.length == 3) {
								let prePage = pages[pages.length - 2];
								let preprePage = pages[pages.length - 3]
								// #ifdef H5
								prePage.refresh(myId);
								preprePage.refresh();
								// #endif
								// #ifdef APP-PLUS
								prePage.$vm.refresh(myId);
								preprePage.$vm.refresh();
								// #endif
							}
						} else {
							let pages = getCurrentPages();
							let prePage = pages[pages.length - 2];
							// #ifdef H5
							prePage.refresh(myId);
							// #endif
							// #ifdef APP-PLUS
							prePage.$vm.refresh(myId);
							// #endif
						}

						util.syncBadge(getApp())
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			getStatusText(value) {
				let text = null
				this.statusList.forEach(item => {
					if (item.value == value) {
						text = item.text
					}
				})
				return text
			},
			getCancelStatusText(value) {
				let text = null
				this.cancelStatusList.forEach(item => {
					if (item.value == value) {
						text = item.text
					}
				})
				return text
			},
			getDetail() {
				let url = app.globalData.config.interfaces.URL_GET_CARORDER_ORDER
				let params = {
					"id": this.id
				};
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						this.details = res.data
						this.details.finalPayment = (Number(this.details.orderAmount) * 100 - Number(this.details
							.depositAmount) * 100) / 100
						this.loading = false
						this.expireTime = res.data.expireTime
						this.getBeiJingTime()

					}
				})
			},

			copy(orderId) {
				uni.setClipboardData({
					data: orderId
				})
			},
			toOrderDetailEvaluate() {
				uni.navigateTo({
					url: `/module_my/pages/orderDetail/orderEvaluate?id=${this.id}&listType=1&orderType=order&type=${this.details.evaluateStatus ? 'onlyRead': 'create'}`
				});
			},
			toPay() {
				let _this = this
				_this.warnShow = true
				// uni.showModal({
				// 	title: '',
				// 	content: '若订单状态变更为订单已审批，则您的车辆已进入排产阶段，将无法取消订单及退款',
				// 	confirmColor: '#EA5404',
				// 	confirmText: '我已知晓',
				// 	showCancel: false,
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			uni.navigateTo({
				// 				url: `/module_my/pages/orderList/payment/payment?id=${_this.id}&currentPayType=${_this.details.currentPayType}&money=${_this.details.currentPayType == 1 ? _this.details.depositAmount: _this.details.orderAmount}`
				// 			})
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消')
				// 		}
				// 	}
				// });
			},
			confirmToPay: function() {
				var _this = this
				uni.navigateTo({
					url: `/module_my/pages/orderList/payment/payment?id=${_this.id}&currentPayType=${_this.details.currentPayType}&money=${_this.details.currentPayType == 1 ? _this.details.depositAmount: _this.details.orderAmount}`
				})
				_this.warnShow = false
			},
			cancelOrder() {
				let _this = this
				this.show = true
				uni.showModal({
					title: this.title,
					content: this.details.currentPayType == 1 ? this.dialogContent : this.dialogContent2,
					confirmColor: '#EA5404',
					success: function(res) {
						if (res.confirm) {
							if (_this.details.currentPayType == 1) {
								_this.notPay()
							} else {
								_this.readyPay()
							}
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				});
			},
			// 未支付
			notPay() {
				let url = app.globalData.config.interfaces.URL_LIFAN_CANCEL_ORDER
				let params = {
					id: this.id
				}
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: `取消成功`,
							duration: 2000
						})
						this.getDetail()
					}
				})
			},
			// 已支付
			readyPay() {
				let url = app.globalData.config.interfaces.URL_LIFAN_REFUND_ORDER
				let params = {}
				params.levcCarOrderId = this.id
				network.post(url, params, 'json').then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: `${this.details.currentPayType == 1 ? "取消成功": "申请成功"}`,
							duration: 2000
						})
						this.getDetail()
					}
				})
			},
			refundProgress() {
				uni.navigateTo({
					url: `/module_my/pages/orderList/refundProgress/refundProgress?id=${this.id}&cancelAmount=${this.details.cancelAmount}`
				});
			},
			confirmOrder() {
				if (this.details.paymentType != '1') {
					uni.navigateTo({
						url: `/module_my/pages/orderDetail/againConfirm?id=${this.id}`
					});
				}
			},
			dialogConfirm(data) {
				console.log('dialogConfirm', data)
				this.show = false
			},
			dialogCancel(data) {
				console.log('dialogCancel', data)
				this.show = false
			},

		},
	}
</script>

<style>
	@import "./orderDetail.css";
</style>
